<!--
	作者：931547491@qq.com
	时间：2015-11-20
	描述：浮动的学习
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css知多少浮動</title>
	</head>

	<body>
		<!--
		1.float 元素本身包裹性
		2.为啥要具有包裹性呢，这是跟设计初衷一样的，为了文字环绕。如果不包裹(浮动元素是一个div)会出现啥情况呢:
		参见div3&div4
    -->
		<div id="div1" style="display: block;">
			这是测试1的文字，这段文字的div宽度整屏
		</div>
		<div id="div2" style="display: block;color: red;float:left">
			这是测试2的文字,这段文字被包裹了
		</div>
		<hr style="clear: left;"/>
		<h2 style="color: red;clear: left;">1.这是不包裹的后果</h2>
		<div id="div3" style="clear: left;/*清除浮动，防止对示例3造成影响*/">
			<div><img src="img/test.png" width="200" height="200"  alt="" /></div>
			知道了包裹性之后，我们还是继续思考：float为什么要具有包裹性？其实答案还得从float的设计初衷来寻找，float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个div呢？此时div不被“包裹”起来，那么如何去实现环绕效果？
		</div>
		<hr />
			<h2 style="color: red;clear: left;">2.只有包裹才能实现文字环绕效果</h2>
		<div id="div4" style="clear: left;/*清除浮动，防止对示例3造成影响*/">
			<div style="float: left;"><img src="img/test.png"  width="200" height="200"  alt="" /></div>
			知道了包裹性之后，我们还是继续思考：float为什么要具有包裹性？其实答案还得从float的设计初衷来寻找，float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个div呢？此时div不被“包裹”起来，那么如何去实现环绕效果？
		</div>
		<hr style="clear: left;"/>
		<h2>3.float去空格的功效</h2>
		<h4>终于知道为啥img能利用float去空格了，一直不知道为啥。“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。</h4>
		<div id="div5">
			<img src="img/bag_01.png" width="50"  alt="没有去空格的" />
			<img src="img/bag_05.png" width="50"  alt="没有去空格的" />
			<img src="img/bag_08.png" width="50"  alt="没有去空格的" />
			<img src="img/bag_10.png" width="50"  alt="没有去空格的" />
		</div>
		<div id="div6">
			<img style="float: left;" src="img/bag_01.png" width="50"  alt="去空格的" />
			<img style="float: left;" src="img/bag_05.png" width="50"  alt="去空格的" />
			<img style="float: left;" src="img/bag_08.png" width="50"  alt="去空格的" />
			<img style="float: left;" src="img/bag_10.png" width="50"  alt="去空格的" />
		</div>
		<h2 style="clear: both;color: orange;">总结:刚才疑惑了一下为啥，divA中的子divAA浮动。divB为啥会排布错乱。原来是因为divAA脱离文档流后divB会顺着divA往下排。就会导致divB也在图片右侧出现了</h1>
	</body>

</html>